<template>
  <div
    class="attendance-container"
    :style="{ background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)' }"
  >
    <!-- 顶部统计卡片123 -->
    <div class="dashboard-header">
      <el-row :gutter="24">
        <el-col
          :xs="24"
          :sm="12"
          :lg="6"
          v-for="(item, index) in statsData"
          :key="index"
        >
          <div class="stat-card" :style="{ background: item.gradient }">
            <div class="card-icon">
              <i
                :class="item.icon"
                style="font-size: 28px; color: rgba(255, 255, 255, 0.9)"
              ></i>
            </div>
            <div class="card-content">
              <h3 class="value">{{ item.value }}</h3>
              <p class="title">{{ item.title }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 打卡功能区域 -->
    <el-button
      :type="punchButton.type"
      @click="handlePunchIn"
      :disabled="isPunched"
      style="margin-left: 20px; margin-bottom: 30px"
    >
      打卡上班
    </el-button>
    <el-button
      :type="punchButton.type"
      @click="handlePunchOut"
      :disabled="isPunched"
      style="margin-left: 20px; margin-bottom: 30px"
    >
      打卡下班
    </el-button>
    <div v-if="lastPunchTime" class="punch-time">
      上次打卡时间：{{ formatTime(lastPunchTime) }}
    </div>
    <!-- 主内容区 -->
    <div class="dashboard-container">
      <!-- 左侧功能区 -->
      <div class="main-content">
        <!-- 增强版操作卡片 -->
        <div class="enhanced-action-card">
          <h3 class="section-title">快速操作</h3>
          <el-row :gutter="20" v-if="operations.length > 0">
            <el-col :span="8" v-for="(btn, index) in operations" :key="index">
              <div
                class="operation-card"
                :style="{ background: btn.background }"
                @mouseenter="hoverIndex = index"
                @mouseleave="hoverIndex = -1"
                :class="{ 'hover-scale': hoverIndex === index }"
                @click="approvalOpen(btn)"
              >
                <div class="operation-icon">
                  <i :class="btn.icon" style="font-size: 32px"></i>
                </div>
                <h4 class="operation-title">{{ btn.title }}</h4>
                <p class="operation-desc">{{ btn.desc }}</p>
                <div
                  class="hover-line"
                  :style="{ background: btn.color }"
                ></div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 考勤图表 -->
        <div class="chart-card">
          <h3 class="section-title">本月考勤趋势</h3>
          <div ref="attendanceChart" style="height: 320px"></div>
        </div>
      </div>

      <!-- 右侧侧边栏 -->
      <div class="sidebar">
        <div class="recent-card">
          <h3 class="section-title">最近申请</h3>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in recentApplications"
              :key="index"
              :timestamp="item.time"
              placement="top"
            >
              <div class="timeline-item">
                <el-tag :type="item.type" effect="dark">{{
                  item.status
                }}</el-tag>
                <p class="timeline-content">{{ item.content }}</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>

    <!-- 请假申请弹窗 -->
    <el-dialog
      :title="请假申请"
      :visible.sync="this.showDialogQJ"
      width="600px"
    >
      <el-form
        :model="applicationForm"
        :rules="formRules"
        ref="applicationForm"
        label-width="100px"
      >
        <el-form-item label="申请类型" prop="type">
          <el-select
            v-model="applicationForm.applicationType"
            placeholder="请选择类型"
            class="full-width"
          >
            <el-option
              v-for="(item, index) in this.leave"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            @input="changeDate"
            v-model="applicationForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            class="full-width"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            @input="changeDate"
            v-model="applicationForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            class="full-width"
          />
        </el-form-item>
        <el-form-item label="请假原因" prop="applicationReason">
          <el-input
            @input="changeDate"
            type="textarea"
            v-model="applicationForm.applicationReason"
            :rows="4"
            placeholder="请输入详细原因"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialogQJ = false">取 消</el-button>
        <el-button type="primary" @click="commitForm()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 外出申请弹窗 -->
    <el-dialog
      :title="外出申请"
      :visible.sync="this.showDialogWC"
      width="600px"
    >
      <el-form
        :model="applicationForm"
        :rules="formRules"
        ref="applicationForm"
        label-width="100px"
      >
        <el-form-item label="申请类型" prop="type">
          <el-select
            v-model="applicationForm.applicationType"
            placeholder="请选择类型"
            class="full-width"
          >
            <el-option
              @input="changeDate"
              v-for="(item, index) in this.outing"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            @input="changeDate"
            v-model="applicationForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="timestamp"
            class="full-width"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            @input="changeDate"
            v-model="applicationForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            value-format="timestamp"
            class="full-width"
          />
        </el-form-item>
        <el-form-item label="外出事由" prop="applicationReason">
          <el-input
            @input="changeDate"
            type="textarea"
            v-model="applicationForm.applicationReason"
            :rows="4"
            placeholder="请输入详细原因"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialogWC = false">取 消</el-button>
        <el-button type="primary" @click="commitForm()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 补卡申请弹窗 -->
    <el-dialog
      :title="补卡申请"
      :visible.sync="this.showDialogBK"
      width="600px"
    >
      <el-form
        @input="changeDate"
        :model="applicationForm"
        :rules="formRules"
        ref="applicationForm"
        label-width="100px"
      >
        <el-form-item label="申请类型" prop="type">
          <el-select
            v-model="applicationForm.applicationType"
            placeholder="请选择类型"
            class="full-width"
          >
            <el-option
              @input="changeDate"
              v-for="(item, index) in this.reissue"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="applicationForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="timestamp"
            class="full-width"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="applicationForm.endTime"
            type="datetime"
            @input="changeDate"
            placeholder="选择结束时间"
            value-format="timestamp"
            class="full-width"
          />
        </el-form-item>
        <el-form-item label="请假原因" prop="applicationReason">
          <el-input
            type="textarea"
            @input="changeDate"
            v-model="applicationForm.applicationReason"
            :rows="4"
            placeholder="请输入详细原因"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialogBK = false">取 消</el-button>
        <el-button type="primary" @click="commitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
import dayjs from "dayjs";
import * as echarts from "echarts";
import { getInfo } from "@/api/login";
import { punch } from "@/api/user/jyAttendance";
import { punchOut } from "@/api/user/jyAttendance";
import { gethandlePunchIn } from "@/api/user/jyAttendance";
import { applicationPushForm } from "@/api/user/jyAttendance";
import { attendanceTime } from "@/api/user/jyAttendance";

export default {
  data() {
    return {
      AttendanceDuration: [12, 19, 3, 5, 2, 3, 9] ,
      //存储用户信息
      user: null,
      punchStatus: "unpunch", // unpunch | working | finished
      lastPunchTime: "2025-03-29 21:16:23",
      activeTab: "leave",
      applicationForm: {
        applicationCategory: "",
        employeeName: "",
        employeeNumber: "",
        endTime: "",
        startTime: "",
        applicationType:''
      },
      showDialogQJ: false,
      showDialogWC: false,
      showDialogBK: false,

      // 模拟数据
      leaveRecords: [{ date: "2024-03-01", type: "病假", status: "已批准" }],
      reissueRecords: [{ date: "2024-03-01", type: "病假", status: "已批准" }],
      outingRecords: [{ date: "2024-03-01", type: "病假", status: "已批准" }],
      currentAppType: "leave",
      punchForm: {
        type: "IN",
        employeeName: "",
      },
      applicationTitles: {
        leave: "请假申请",
        reissue: "补卡申请",
        outing: "外出申请",
      },
      //打卡记录
      attendanceRecords: null,
      //申请类型
      leave: [
        { label: "事假", value: "personal" },
        { label: "病假", value: "sick" },
        { label: "年假", value: "annual" },
      ],
      reissue: [
        { label: "上班补卡", value: "IN" },
        { label: "下班补卡", value: "OUT" },
      ],
      outing: [
        { label: "商务外出", value: "business" },
        { label: "私人外出", value: "personal" },
      ],
      formRules: {
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        punchTime: [
          { required: true, message: "请选择补卡时间", trigger: "change" },
        ],
        outingTime: [
          { required: true, message: "请选择外出时间", trigger: "change" },
        ],
        applicationReason: [{ required: true, message: "请输入原因", trigger: "change" }],
        // 在formRules中增加更复杂的验证
        endTime: [
          {
            validator: (rule, value, callback) => {
              if (value <= this.applicationForm.startTime) {
                callback(new Error("结束时间必须晚于开始时间"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      hoverIndex: -1,
      statsData: [
        {
          title: "本月出勤天数",
          value: "22 天",
          icon: "el-icon-date",
          gradient: "linear-gradient(45deg, #6a85b6, #bac8e0)",
        },
        {
          title: "迟到次数",
          value: "2 次",
          icon: "el-icon-alarm-clock",
          gradient: "linear-gradient(45deg, #ff9a9e, #fad0c4)",
        },
        {
          title: "剩余假期",
          value: "5 天",
          icon: "el-icon-sunny",
          gradient: "linear-gradient(45deg, #a8edea, #fed6e3)",
        },
        {
          title: "待审批",
          value: "3 条",
          icon: "el-icon-document-checked",
          gradient: "linear-gradient(45deg, #c4e0e5, #f0f3f5)",
        },
      ],
      operations: [
        {
          title: "请假申请",
          desc: "快速提交请假审批",
          icon: "el-icon-date",
          color: "#409EFF",
          background: "rgba(64, 158, 255, 0.08)",
        },
        {
          title: "外出申请",
          desc: "记录外出工作详情",
          icon: "el-icon-location-outline",
          color: "#67C23A",
          background: "rgba(103, 194, 58, 0.08)",
        },
        {
          title: "补卡申请",
          desc: "异常打卡记录补救",
          icon: "el-icon-time",
          color: "#E6A23C",
          background: "rgba(230, 162, 60, 0.08)",
        },
      ],
      recentApplications: [
        {
          time: "2024-02-20",
          type: "primary",
          status: "已批准",
          content: "病假申请",
        },
        {
          time: "2024-02-18",
          type: "success",
          status: "已完成",
          content: "外出申请",
        },
        {
          time: "2024-02-15",
          type: "warning",
          status: "待审批",
          content: "调休申请",
        },
      ],
    };
  },
  computed: {
    punchButton() {
      return {
        unpunch: { text: "打卡上班", type: "success" },
        working: { text: "打卡下班", type: "warning" },
        finished: { text: "今日已完成", type: "info" },
      }[this.punchStatus];
    },
    isPunched() {
      return this.punchStatus === "finished";
    },
  },
  mounted() {
    // ✅ 正确的生命周期钩子位置
    this.getattendanceTime();
    this.initChart();
    this.getUserInfo();
    
  },
  methods: {
    //获取当前登录用户信息
    getUserInfo() {
      getInfo().then((res) => {
        this.user = res.user;
      });
    },

    //下班打卡功能
    handlePunchOut() {
      this.punchForm.attendanceTime = this.formatTime(new Date());
      this.punchForm.employeeId = this.user.userId;
      this.punchForm.employeeName = this.user.userName;
      this.punchForm.attendanceMethod = "Online";
      this.punchForm.attendanceType = "OUT";
      punchOut(this.punchForm).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "牛马再见，下班打卡成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "打卡失败请联系管理员！！",
            type: "success",
          });
        }
      });
    },
    //上班的打卡功能
    handlePunchIn() {
      this.punchForm.attendanceTime = this.formatTime(new Date());
      this.punchForm.employeeId = this.user.userId;
      this.punchForm.employeeName = this.user.userName;
      this.punchForm.attendanceMethod = "Online";
      gethandlePunchIn(this.punchForm).then((res) => {
        this.attendanceRecords = res;
        if (this.attendanceRecords != null) {
          this.$message({
            message: "今日已上班打卡，无需再打卡！",
            type: "info",
          });
          return;
        }
        punch(this.punchForm).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "牛马早上好，上班打卡成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "打卡失败请联系管理员！！",
              type: "success",
            });
          }
        });
      });
    },

    //申请表单提交
    commitForm() {
      this.applicationForm.startTime = this.formatTime(
        this.applicationForm.startTime
      );
      this.applicationForm.endTime = this.formatTime(
        this.applicationForm.endTime
      );
      this.applicationForm.employeeName = this.user.userName;
      this.applicationForm.employeeNumber = this.user.userId;
      applicationPushForm(this.applicationForm).then((res) => {
        if ((res.code = 200)) {
          this.$message({
            message: "提交成功",
            type: "success",
          });
        } else {
          this.$message.error("提交失败！");
        }
      });
      //关闭表单操作
      this.showDialogQJ = false;
      this.showDialogBK = false;
      this.showDialogWC = false;
    },
    //时间格式化
    formatTime(timestamp) {
      return dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss");
    },

    formatDate(timestamp) {
      return dayjs(timestamp).format("YYYY-MM-DD");
    },

    //弹出申请框
    approvalOpen(type) {
      //置空表单
      this.applicationForm.applicationCategory = '';
      this.applicationForm.applicationReason = '';
      this.applicationForm.applicationType = '';
      this.applicationForm.employeeName = '';
      this.applicationForm.employeeNumber = '';
      this.applicationForm.endTime = '';
      this.applicationForm.startTime = '';
      if (type.title === "请假申请") {
        this.showDialogQJ = true;
        this.applicationForm.applicationCategory = "leave";
      } else if (type.title === "补卡申请") {
        this.showDialogBK = true;
        this.applicationForm.applicationCategory = "reissue";
      } else if (type.title === "外出申请") {
        this.showDialogWC = true;
        this.applicationForm.applicationCategory = "outing";
      }
      this.currentAppType = type.title;
      this.resetForm();
      this.showDialog = true;
    },
    changeDate() {
      this.$forceUpdate();
    },
    resetForm() {
      this.$refs.applicationForm?.resetFields();
    },
    //获取本周周一到周五日期
    getCurrentWeekDates() {
      const today = new Date();
      const dayOfWeek = today.getDay(); // 0（周日）到6（周六）

      // 计算与本周一的差值（若今天是周日，则周一需要 -6天）
      const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
      const monday = new Date(today);
      monday.setDate(today.getDate() + diffToMonday);

      // 生成周一到周日的日期数组
      const weekDates = [];
      for (let i = 0; i < 7; i++) {
        const date = new Date(monday);
        date.setDate(monday.getDate() + i);
        weekDates.push(this.formatDate(date));
      }

      return weekDates;
    },
    //获取考勤数据
    getattendanceTime(){
      const a=this.getCurrentWeekDates()
      attendanceTime(a).then(res=>{
        console.log(res.at(0));
        this.AttendanceDuration=res
        console.log(this.AttendanceDuration);
        this.initChart()
        
        
      })
    },

    submitApplication() {
      this.$refs.applicationForm.validate((valid) => {
        if (valid) {
          // 模拟API调用
          const payload = this.generatePayload();
          this.$axios.post(`/api/${this.currentAppType}`, payload).then(() => {
            this.$message.success("提交成功");
            this.updateLocalData(payload);
            this.showDialog = false;
          });
        }
      });
    },
    generatePayload() {
      const base = {
        type: this.applicationForm.type,
        reason: this.applicationForm.reason,
        applyTime: Date.now(),
      };

      switch (this.currentAppType) {
        case "leave":
          return {
            ...base,
            startTime: this.applicationForm.startTime,
            endTime: this.applicationForm.endTime,
          };
        case "reissue":
          return {
            ...base,
            punchTime: this.applicationForm.punchTime,
          };
        case "outing":
          return {
            ...base,
            outingTime: this.applicationForm.outingTime,
            duration: this.applicationForm.duration,
          };
      }
    },
    updateLocalData(payload) {
      const record = {
        ...payload,
        status: "审批中",
        applyTime: this.formatTime(payload.applyTime),
      };
      this[`${this.currentAppType}Records`].unshift(record);
    },
    initChart() {
      const chart = echarts.init(this.$refs.attendanceChart);
      const option = {
        tooltip: { trigger: "axis" },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLine: { lineStyle: { color: "#999" } },
        },
        yAxis: {
          type: "value",
          axisLine: { show: false },
          splitLine: { lineStyle: { type: "dashed" } },
        },
        series: [
          {
            data: this.AttendanceDuration,
            type: "bar",
            itemStyle: {
              borderRadius: [6, 6, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 1, color: "#188df0" },
              ]),
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

  <style scoped>
.attendance-container {
  max-width: 800px;
  margin: 2px auto 0;
  padding: 20px;
}

.punch-time {
  color: #666;
  font-size: 14px;
}

.application-tabs {
  margin-top: 30px;
}
.action-bar {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.application-button {
  margin-right: 15px;
}

.full-width {
  width: 100%;
}

.custom-button {
  height: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 弹窗美化 */
:deep(.custom-dialog) {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

:deep(.custom-dialog .el-dialog__header) {
  border-bottom: 1px solid #eee;
  padding: 20px 24px;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 18px;
  color: #333;
}

:deep(.custom-dialog .el-form-item__label) {
  font-weight: 500;
  color: #666;
  padding-bottom: 8px;
}

:deep(.custom-dialog .el-input__inner) {
  border-radius: 6px;
  height: 40px;
}

:deep(.custom-dialog .el-textarea__inner) {
  border-radius: 6px;
  padding: 12px;
}
/* 高级感样式设计 */
.dashboard-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding: 0 24px;
}

/* 统计卡片 */
.stat-card {
  padding: 24px;
  border-radius: 16px;
  color: white;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  padding: 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  margin-right: 20px;
}

.value {
  font-size: 26px;
  margin: 8px 0;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.title {
  opacity: 0.9;
  font-size: 14px;
}

/* 操作卡片 */
.enhanced-action-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.operation-card {
  padding: 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.operation-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.hover-scale {
  transform: scale(1.02);
}

.operation-icon {
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.operation-card:hover .operation-icon {
  transform: translateY(-5px);
}

.operation-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.operation-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.hover-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.operation-card:hover .hover-line {
  transform: scaleX(1);
}

/* 时间线样式 */
.recent-card {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.timeline-item {
  background: rgba(245, 247, 250, 0.5);
  padding: 12px;
  border-radius: 8px;
  margin: 8px 0;
}

.section-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 24px;
  padding-left: 8px;
  border-left: 4px solid #409eff;
}

/* 图表卡片 */
.chart-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.operation-card {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.operation-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  transform: skewX(-30deg);
  transition: left 0.6s;
}

.operation-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--primary-color);
}

.operation-card:hover::before {
  left: 150%;
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 添加图标动画 */
.operation-icon {
  transition: transform 0.4s ease, color 0.3s ease;
}

.operation-card:hover .operation-icon {
  transform: rotate(-10deg) scale(1.1);
  color: var(--primary-color) !important;
}

/* 添加悬浮投影 */
.operation-card {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}

.operation-card:hover {
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.15));
}
</style>
